<template>
	<div class="col-lg-12">
		<div class="ibox">
			<div class="ibox-content">
				<div id="reportrange" class="form-control">
					<div class="block">
						<el-checkbox v-model="checked" class="mr-1"></el-checkbox>
						<label class="col-form-label mr-1">时间段:</label>
						<el-date-picker
							v-model="filter_object.dateTime"
							type="daterange"
							align="right"
							size="mini"
							value-format="yyyy-MM-dd"
							:unlink-panels="true"
							range-separator="-"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							:picker-options="pickerOptions"
							:disabled="!checked"
							class="mr-4"
						></el-date-picker>
						<label class="col-form-label mr-1">{{droplist.title}}</label>
						<el-select
							v-if="droplist.title"
							v-model="filter_object.selectValue"
							@change="select_changed"
							placeholder="所有"
							size="mini"
							class="mr-3"
							clearable
						>
							<el-option label="所有" value></el-option>
							<el-option
								v-for="(branch, index) in droplist.data"
								:key="index"
								:label="branch"
								:value="branch"
							></el-option>
						</el-select>
						<el-button
							icon="el-icon-search"
							size="small"
							type="primary"
							:loading="searching"
							@click="search"
							class
							style="margin-left: 30px;margin-right: 5px;"
						>搜索</el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'datePlugin',
	props: {
		droplist: [Array, Object]
	},
	data() {
		return {
			pickerOptions: {
				shortcuts: [
					{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					},
					{
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					},
					{
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}
				]
			},
			searching: false,
			checked: false,
			filter_object: {
				dateTime: null,
				selectValue: ''
			}
		};
	},
	methods: {
		search: function() {
			this.$emit('searchClick', this.filter_object);
		},
		select_changed: function() {
			this.$emit('select_change', this.filter_object.selectValue);
		}
	},
	watch: {
		checked: function() {
			if (this.checked) {
			} else {
				this.filter_object.dateTime = null;
			}
			this.$emit('filterChange', this.filter_object);
		},
		'filter_object.dateTime': {
			deep: true,
			handler: function() {
				console.log(this.filter_object.dateTime);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
	@import '../../assets/common/common.scss';
</style>